<template>
  <div class="public_main">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>{{$t('idManage.crumbsOne')}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{$t('permission.crumbsOne')}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- ------------搜索查询栏开始-------------- -->
    <div class="list_operation" v-if="$store.state.common.permiss.menupermissionlist.includes('add')">
      <el-button 
        type="primary"  
        size="small"
        @click="showAdd(1)">+{{$t('permission.add')}}</el-button>
    </div>
    <!-- ------------ 搜索查询栏结束 -------------- -->

    <!-- ------------ 表单栏开始 -------------- -->
    <div class="table" >
      <el-table :data="tableData" size="small" stripe style="width: 100%" >
        <el-table-column align="center" prop="id" :label="$t('permission.id')" width="180">
        </el-table-column>
        <el-table-column align="center" prop="name" :label="$t('permission.type')" min-width="300">
        </el-table-column>
        <el-table-column align="center" prop="gmtCreate" :label="$t('public.no21')" min-width="300">
        </el-table-column>
        <el-table-column align="center" prop="operation" :label="$t('public.operation')" min-width="180">
          <template slot-scope="scope">
            <span 
              v-if="$store.state.common.permiss.menupermissionlist.includes('edit')"
              class="table_opr"
              @click="showAdd(2,scope.row.id,scope.row.name,scope.row.dataScope,scope.row.roleCategory)">
              {{$t('permission.modify')}}
            </span>
            <span 
              v-if="$store.state.common.permiss.menupermissionlist.includes('del')"
              class="table_opr"
              @click="delPre(scope.row.id)">
              {{$t('permission.del')}}
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- ------------  分页显示栏  ------------------------ -->
    <el-row type="flex" justify="end">
      <div class="pages" >
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="pagination.current"
          layout="prev, pager, next, total,->"
          :page-sizes="pagination.pageSizeOptions"
          :total="pagination.total">
        </el-pagination>
      </div>
    </el-row>

    <!-- ----------------------确认是否删除开始------------------ -->
    <el-dialog :title="$t('public.no48')" :visible.sync="delFlag" width="550px">
      <div class="left2right">
        <span class="left"></span>
        <span class="right">{{$t('permission.delUser')}}？</span>
      </div>
      <div class="left2right mt15">
        <span class="left"></span>
        <span class="right">
          <el-button type="primary" @click="delSure()">{{$t('public.no49')}}</el-button>
        </span>
      </div>
    </el-dialog>
    <!-- ----------------------确认是否删除结束------------------- -->

    <!-- ------------------确认是否修改开始-------------------- -->
    <div v-if="addRole">
      <el-dialog :title="$t('permission.modifyTitle')" :visible.sync="addRole" width="90%" :close-on-click-modal="false"	>
        <div class="role mb20">
          <span class="red">*</span><span class="mr10">{{$t('permission.typeName')}}:</span>
          <el-input type="user" required size="small" style="width:300px;" v-model="roleName" :disabled="isModify" auto-complete="off"></el-input>
        </div>
        <div class="role mb20">
          <span class="red">*</span><span class="mr10">{{$t('payConfig.no13')}}:</span>
          <el-radio v-model="dataScope" :label="1">{{$t('add.no97')}}</el-radio>
          <el-radio v-model="dataScope" :label="2">{{$t('add.no98')}}</el-radio>
        </div>
        <div class="role mb20">
          <span class="red">*</span><span class="mr10">{{$t('add.no96')}}:</span>
          <el-radio v-model="roleCategory" :label="3">{{$t('operationList.no1')}}</el-radio>
          <el-radio v-model="roleCategory" :label="2">{{$t('new.no96')}}</el-radio>
          <el-radio v-model="roleCategory" :label="1">{{$t('staffManage.kefu')}}</el-radio>
          <el-radio v-model="roleCategory" :label="4">{{$t('add.no99')}}</el-radio>
        </div>
        <div class="modify-con flex" >
          <span class="red">*</span>
          <el-tree
            :data="treeData" 
            :props="defaultProps" 
            node-key="id"
            @check-change="handleCheckChange('tree1')"
            :default-checked-keys="defCheKeys"
            show-checkbox
            ref="tree1"
          >
          </el-tree>
        </div>
        <!-- <div class="modify-con" v-else>
          <el-tree
            :data="treeData" 
            :props="defaultProps" 
            node-key="id"
            @check-change="handleCheckChange('tree2')"
            show-checkbox
            ref="tree2"
          >
          </el-tree>
        </div> -->
        <div class="flex flex-justify-center">
          <el-button type="primary" @click="addSure()">{{$t('public.no49')}}</el-button>
          <el-button type="primary" @click="addClose">{{$t('public.no50')}}</el-button>
        </div>
      </el-dialog>
    </div>
    

    <div class="foot"></div>
  </div>
</template>

<script>
import fn from 'src/utils/fn.js';
export default {
  data () {
    return {
      flag: true,
      pagination: {
        current: 1,
        total: 0,
      },
      roleState: '', // 角色
      tableData: [], // 信息数据模拟
      options: [], // 角色列表下拉框
      delFlag: false, // 删除弹窗开关
      isModify: false, // 判断是否是修改弹窗
      delId: '', // 删除目标行数对应的id
      delStatus: '', // 删除目标行数对应的id
      modifyId: '', // 修改目标行数对应的id
      addRole: false, // 添加角色按钮弹窗开关
      roleName: '', // 修改角色对应的角色名
      addRoleName: '', // 添加角色对应的角色名
      defCheKeys: [], // 默认选中的角色权限列表
      keys1: [], // 修改角色权限列表数组
      keys1_parent: [], // 修改角色权限列表数组父节点的key
      treeData: [], // 权限列表对应数据
      dataScope: '',
      roleCategory: '',
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  methods: {
    handleCurrentChange (val) { // 分页按钮点击操作
      this.pagination.current = val;
      this.getTableData();
    },
    delPre (id) { // 删除按钮弹窗
      this.delFlag = true;
      this.delId = id;
    },
    delSure () { // 删除确认操作
      let option = {
        param: {
          id: this.delId,
          status: 0,
        },
      }
      this.$axios.post(this.$action.sysrole_delete, option).then(res => {
        if (res.code == 200) {
          this.$globalMsg.success(this.$t('idManage.no3'));
          this.getTableData()
        } else {
          this.$globalMsg.error(res.message);
        }
        this.delFlag = false;
      })
    },
    showAdd(str,id, name,dataScope,roleCategory){
      if(str==1){
        this.defCheKeys.length = 0
        this.addRole = true
      }
      if(str==2){
        this.isModify = true
        this.modifyId = id;
        this.roleName = name;
        this.dataScope = dataScope;
        this.roleCategory = roleCategory;
        this.getDeffaultData(id)
      }
    },
    addClose () { // 修改弹窗关闭
      this.addRole = false
      this.isModify = false
      this.modifyId = ''
      this.roleName = ''
      this.dataScope = ''
      this.roleCategory = ''
      this.defCheKeys = []
      this.keys1 = []
      this.keys1_parent=[]
    },
    addSure () { // 添加角色确认操作
      if(this.roleName==''||this.dataScope==''||this.roleCategory==''||this.keys1.length==0){
        return this.$globalMsg.error(this.$t('public.no88'))
      }
      let httpurl = this.isModify?this.$action.role_update:this.$action.role_add
      let arr = new Set([...this.keys1, ...this.keys1_parent]);
      let brr = []
      arr.forEach(value=>{
        if(this.isModify){
          brr.push({menuId:value,name: this.roleName,dataScope:this.dataScope,roleCategory:this.roleCategory,roleId:this.modifyId})
        }else{
          brr.push({menuId:value,name: this.roleName,dataScope:this.dataScope,roleCategory:this.roleCategory})
        }
      })
      let option = {
        param: brr
      }
      this.$axios.post(httpurl, option).then(res => {
        this.flag = true;
        if (res.code == 200) {
          this.$globalMsg.success(this.$t('message.success'));
          this.getTableData();
          this.addClose()
        } else {
          this.$globalMsg.error(res.message);
        }
      })
    },
    handleCheckChange () { // 修改角色对应的权限列表
       this.keys1_parent = this.$refs.tree1.getHalfCheckedKeys();
      this.keys1 = this.$refs.tree1.getCheckedKeys();
      //this.keys1 = this.$refs[tree].getCheckedKeys(true)
    },
    getTableData () { // 获取角色列表
      let option = {
        pageNum:this.pagination.current,
        pageSize:this.pagination.pageSize,
        param: {}
      }
      this.$axios.post(this.$action.sysrole, option).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.list;
          this.pagination.total = res.data.total;
        }
      })
    },
    getPerTree () { // 获取角色权限树状图列表
      this.$axios.post(this.$action.menu_list,{"param": {}}).then(res => {
        if (res.code == 200) {
          let menulist = fn.treeDataTranslate(res.data,'id','parentId')
          this.treeData = menulist;
        }
      })
    },
    getDeffaultData (id) { // 获取角色默认权限
      this.defCheKeys = []
      this.$axios.post(this.$action.role_menu,{"param": {id}}).then(res => {
        if (res.code == 200) {
          let arr = res.data;
          arr.forEach(value=>{
            this.defCheKeys.push(value.menuId)
            this.keys1.push(value.menuId)
          })
          this.addRole = true
          this.$nextTick(()=>{
            this.$refs.tree1.setCheckedKeys(this.defCheKeys);
          })
        } else {
          this.$globalMsg.error(res.message);
        }
      })
    },
  },
  watch:{
    addRole(value){
      if(!value){
        this.addClose()
      }
    }
  },
  mounted () {
    this.getTableData();// 获取权限列表
    this.getPerTree();// 获取所有权限列表树
  }
}
</script>
<style scoped lang="scss">

</style>
